<template>
    <div style="width:100%;height:100%;overflow:hidden">
        <div id="map"></div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            map:null
        }
    },
    mounted(){
      this.init()
    },
    methods: {
        init(){
         this.smartmapx.mapbase="http://www.smartmapx.com";
         this.smartmapx.apikey="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1MzcxODM1OTgsImRhdGEiOiJ7XCJsb2dpbl9uYW1lXCI6XCJyb290XCIsXCJnZW5kZXJcIjoyLFwidXNlcl9pZFwiOlwiZm1fc3lzdGVtX3VzZXJfcm9vdFwiLFwidXNlcl9uYW1lXCI6XCJyb290XCIsXCJ1c2VyX29yaWdpbl9pZFwiOlwiZm1fbG9jYWxcIixcInByb2R1Y3RfaWRcIjpcIlwiLFwiZXhwaXJlX3RpbWVcIjpcIlwiLFwic291cmNlX2lkXCI6XCJcIixcInR5cGVcIjpcIlwiLFwiY29ycF9pZFwiOlwiZm1fc3lzdGVtX2NvcnBcIn0iLCJleHAiOjQwOTI1OTkzNDksImp0aSI6ImFfNjhmZjBhZGY5OTcxNDQ0NThjNzViZWFiN2FjNTkzYWYifQ.W122WkT6QR4HZWbpalkpmirV9JWkDYcCkmNZoxCB_z8"
         this.map=new this.smartmapx.Map({
              container:'map',
              mapId:'2add4026-4a41-4d42-8ae2-34604436cc4e',
              center:[116.39738, 39.90579],
              zoom:10
          })
            var nav = new this.smartmapx.NavigationControl();
            this.map.addControl(nav, 'top-right');

            // 添加比例尺
            this.map.addControl(new this.smartmapx.ScaleControl({
                    maxWidth: 100,
                    unit: 'm'
                }));
            var geojson={
                'type': 'FeatureCollection',
                 'lineMetrics': true,
                'features':[
                  {
                    "id":"e410e8d18bd79f90429306bd844e8ca3",
                    "type":"Feature",
                    "properties":{},
                    "geometry":{
                        "coordinates":[
                            [116.24491680873302,39.827824068695804],
                            [116.25495055360108,39.83552927749915],
                            [116.25351716149203,39.8487361959734],
                            [116.2764514354813,39.85148731758724],
                            [116.27215125910175,39.866341469029805],
                            [116.30583597403114,39.874592386036],
                            [116.29436883701896,39.88834170889555],
                            [116.30511927795908,39.90318788084289],
                            [116.32662015982174,39.9103348906751],
                            [116.32088659133319,39.9284739515372],
                            [116.28433509215085,39.92957313413174],
                            [116.29938570947047,39.944410371610076],
                            [116.32160328738763,39.9575963264935],
                            [116.33952068894286,39.94111348572599],
                            [116.37750558023413,39.9372669180797],
                            [116.3896894133008,39.95430007607976],
                            [116.38753932510224,39.969681218726976]
                            ],
                            "type":"LineString"
                            }
                          }
                        ]
                    };
                this.map.on('load',()=>{
                    this.map.addSource('ee', {
                        type: 'geojson',
                        // lineMetrics: true,
                        data: geojson
                        });
                    
                    this.map.addLayer({
                        "type": "line",
                        "source": "ee",
                        "id": "line",
                        "paint": {
                        "line-color": "red",
                        "line-width": 14,
                        // "line-gradient": [
                        //     'interpolate',
                        //     ['linear'],
                        //     ['line-progress'],
                        //     0,
                        //     'blue',
                        //     0.1,
                        //     'royalblue',
                        //     0.3,
                        //     'cyan',
                        //     0.5,
                        //     'lime',
                        //     0.7,
                        //     'yellow',
                        //     1,
                        //     'red'
                        //     ]
                        },
                        "layout": {
                        'line-cap': 'round',
                        'line-join': 'round'
                        }
                    })
                })
        }
    }
}
</script>
<style scoped>
 #map{
     width:100%;
     height:100%
 }
</style>